<template>
  <div class="tabbar">
    <router-link
      class="tab-item"
      v-for="(item,index) in data"
      :key="index"
      :to="item.path"
      active-class="is-selected"
    >
      <div class="tab-item-icon">
        <i :class="'fa fa-' + item.icon"></i>
      </div>
      <div class="tab-item-label">{{item.title}}</div>
    </router-link>
  </div>
</template>
<script>
export default {
     name:'tarbar',
     props:{
         data:Array
     }
}
</script>
<style scoped>
.is-selected {
    color: #009eef;
}
.tabbar {
    /* flex布局 */
     display: flex;
     /* 设置高度 */
     height: 45px;  
     width: 100%;
     /* 生成绝对定位的元素，相对于浏览器窗口进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。 */
     position: fixed;   
     bottom: 0;
     /* 设置中间显示 */
     text-align: center;
}
.tab-item {
  display: block;
  padding: 3px 0;
  /* 平分 */
  flex: 1;
}
.tab-item-icon {
  width: 20px;
  height: 20px;
  margin: 0 auto 5px;
}
.tab-item-icon i {
  font-size: 16px;
}
.tab-item-label {
  color: inherit;
  font-size: 10px;
  line-height: 1;
}
</style>
